<template>
	<view>
		<uni-card class="yuyueshijian" >
			<view class="top">
				<image src="../../static/naozhong.png" class="naozhong"></image>
				<view class="time">预约入园时间</view>
				<view class="time1">2024年5月30日 13:00-16:00</view>
			</view>
		</uni-card>
		<view class="yuyueren">
			主预约人
		</view>
		<uni-card class="r">
			<view class="a">姓名<span class="a1">*</span>:</view><br>
			<!-- <view class="b"> --><input type="text"  placeholder="请输入您的姓名" class="b" v-model="text1"><!-- </view> --><br>
			<view class="a">证件类型<span class="a1">*</span>:</view><br>
			<view class="b">
				<select name="sfz" id="sfz" class="c" >
		     <option value="中国居民身份证">中国居民身份证</option>
			 <option value="中国居民身份证">中国居民身份证</option>
			</select>
			</view><br>
			<view class="a">证件号码<span class="a1">*</span>:</view><br>
			<!-- <view class="b"> --><input type="text"  placeholder="请输入您的证件号码" class="b" v-model="text2"><!-- </view> --><br>
			<view class="a">手机号码<span class="a1">*</span>:</view><br>
	        <!-- <view class="b"> --><input type="text"  placeholder="请输入您的手机号码" class="b" v-model="text3"><!-- </view> --><br>
			<view class="">
				<input type="checkbox" id="check1" name="option1" value="option1" class="d">
				同行人有6周岁（含）以下货身高1.2米（含）以下儿童，只需选择儿童数。
			</view>
			<view class="button-container ">
			        <button class="button" @click="handleClick(1)">1人</button>
			        <button class="button" @click="handleClick(2)">2人</button>
			        <button class="button" @click="handleClick(3)">3人</button>
			    </view>
				</uni-card>
		<view class="outButton">
			<button @click="addCard" class="f" >+添加同行人</button>
		</view>
        <view v-for="(card, index) in cards" :key="index" v-if="cards.length > 0">
       <uni-card>
		   <text>同行人</text>
		   <img src="../../static/shanchu.png" alt="删除卡片"  class="z" @click="removeCard(index)">
       	<view class="a">姓名<span class="a1">*</span>:</view><br>
       	<!-- <view class="b"> --><input type="text"  placeholder="请输入您的姓名" class="b"><!-- </view> --><br>
       	<view class="a">证件类型<span class="a1">*</span>:</view><br>
       	<view class="b">
       		<select name="sfz" id="sfz" class="c" >
       	 <option value="中国居民身份证">中国居民身份证</option>
       	 <option value="中国居民身份证">中国居民身份证</option>
       	</select>
       	</view><br>
       	<view class="a">证件号码<span class="a1">*</span>:</view><br>
       	<!-- <view class="b"> --><input type="text"  placeholder="请输入您的证件号码" class="b"><!-- </view> --><br>
       	<view class="a">手机号码<span class="a1">*</span>:</view><br>
       	<!-- <view class="b"> --><input type="text"  placeholder="请输入您的手机号码" class="b"><!-- </view> --><br>
       </uni-card>
     
		
         </view>
		 
	</view>
	<view class="g">
		!最多可预约成人4人,儿童3人
	</view>
	<view>
		<button class="h" @click="toyuyechenggong()"><span class="i">提交预约</span></button>
	</view>
</template>

<script>
export default {
  data() {
    return {
      cards: [] ,
	  text1: '',
	  text2: '',
	  text3: '',
      peopleNum: '',
    };
  },
  methods: {
    addCard() {
      // 创建一个新的卡片对象并将其添加到数组中
      const newCard = { /* 卡片数据 */ };
      this.cards.push(newCard);
    },
	 removeCard(index) {
	      // 从数组中移除指定索引位置的元素
	      this.cards.splice(index, 1);
	},
	handleClick(num){
		this.peopleNum = num;
		
	},
	 toyuyechenggong() {
		
	      uni.navigateTo({
	      		url:'/pages/yuyuechenggong/yuyuechenggong?name=' + this.text1 + '&idnum=' + this.text2 +'&phonenum=' + this.text3 + '&peoplenum' + this.peopleNum 
	      		});
	}
	
  }
};
	

</script>



<style>
	.time{
		width: 72px;
		height: 17px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #000000;
		letter-spacing: 0;
		margin-left: 40px;
	}
	.time1{
		width: 212px;
		height: 21px;
		font-family: PingFangSC-SNaNpxibold;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin-left: 40px;
	}
	.naozhong{
	width: 38px;
	height: 38px;
	opacity: 1;
	float: left;
	}
	.yuyueshijian{
		width: 351px;
		height: 80px;
		background: #FFFFFF;
		border-radius: 12px;

	}
	.yuyueren{
		width: 60px;
		height: 21px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
		margin-left: 12px;
	}
	.a{
		 color: #05261b;
		 font-size: 15px;
		 font-face: PingFangSC;
		 font-weight: 400;
		 line-height: 0;
		 letter-spacing: 0;
		 paragraph-spacing: 0;
		 text-align: left;
		 margin-top: 16px;
		
	}
	.a1{
		 color: #e8240f;
		 font-size: 15px;
		 font-face: PingFangSC;
		 font-weight: 400;
		 line-height: 0;
		 letter-spacing: 0;
		 paragraph-spacing: 0;
		 text-align: left;
	}
	.b{
		width: 319px;
		height: 40px;
		background: #F3F5F9;
		border-radius: 6px;
		align-content: center;
		
      }
	  .top{
		  margin-top: 10px;
	  }
	  .c{
		width: 100%;
		height:40px;
	
		 background: white;
		 float: right;
		/* margin-top: 15px; */
	  }
	   .centered {
	              display: flex;
	              align-items: center;
	          }
	   .d{
		   float: left;
		   margin-bottom: 20px;
	   }
	           .button-container {
	               display: flex;
	               justify-content: center;
	               align-items: center;
	               height: 40px;
				   float: right;
	           }
		.button {
		            width: 52px;
			        height: 24px;
			              background: #F1FAEC;
			              border: 1px solid #8DCB6D;
			              border-radius: 14px;
						  left: 20px;
						  margin-bottom:20px ;
						  font-size: 10px;
						  margin-right: 20px;
			              
			            
			            cursor: pointer;
						   }
			.button:hover {
					background-color: #e0e0e0;
						           }
				.outButton{
					display: flex;
					justify-content: center;
					align-content: center;	
				}
				.f{
					border-style: dashed;
					/* margin-top: 20px; */
					width: 351px;
					height: 60px;
					background: #FFFFFF;
					border: 1px solid #8DCB6D;
					border-radius: 12px;
					/* margin-right:40px; */
					align-content: center;	
					
				}
				.g{
				width: 300px;
				height: 17px;
				opacity: 0.75;
				font-family: PingFangSC-Regular;
				font-weight: 400;
				font-size: 18px;
				color: #323232;
				letter-spacing: 0;
				margin-left: 20px;
				}
				.h{
					width: 351px;
					height: 45px;
					background: #8DCB6D;
					border-radius: 25px;
					margin-top: 20px;
					margin-left: 20px;
				}
				.i{
					width: 68px;
					height: 24px;
					font-family: PingFangSC-Medium;
					font-weight: 500;
					font-size: 17px;
					color: #FFFFFF;
					letter-spacing: 0;
					
				}
				body {
				    background-color: #F3F5F9;
				}
				.z{
					margin-left: 330px;
					
					
				}
				.r{
					width: 351px;
					height: 500px;
					background: #FFFFFF;
					border-radius: 12px;
				}
	

</style>
